<template>
    <div id="body-padding">
        <p id="p">创建日记本</p>
        <input 
            type="text" 
            placeholder="主题" 
            v-model="name"
            @input="zhuti">
        <br>
        <group >
            <Calendar 
                id="group"
                title="过期时间" 
                v-model="val"
            ></Calendar>
        </group>
        <p id="xiao">每天0点日记会暂时消失，到期后就都可以再次浏览</p>
        <group>
            <Selector 
                id="group"
                title="是否公开？" 
                v-model="arr1" 
                :options="arr"
            ></Selector>
        </group>
        <button @click="add" :disabled="show">创建日记本</button>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import {Calendar,Selector,Group} from 'vux';
export default {
    data:function(){
        return {
            show:true,
            val:"",
            arr:["公开","私密"],
            arr1:"公开",
            name:"",
        }
    },
    computed:{
       ...mapState([
           "isLogin",
       ])
    },
    components:{
        Calendar,
        Selector,
        Group,
    },
    methods:{
        time(){ 
            if(!this.isLogin){
                this.$vux.alert.show({
                    title:"请先登录",
                    content:"点击确定返回主页",
                    onHide(){
                        window.location.href="http://localhost:8080";
                    },
                });
            }
            var now = new Date();
            var year = now.getFullYear();   
            var month = now.getMonth()+2;   
            var data = now.getDate();
            month = month>12?1:month;
            this.val = year+'-'+month+'-'+data;
        },
        zhuti(){
            if(this.name.trim().length>0){
                this.show =false;
            }else{
                this.show =true;                
            }
        },
        add(){
            var open = this.arr1=="公开"
            var data = {
                name:this.name,
                expire:this.val,
                open:open,
            }
            this.http.post("/diary/add",data)
            .then(res=>{
                console.log(res.data);
                if(!res.data.err){
                    window.location.href = "http://localhost:8080/#/new";
                }
            })
          
        }, 
    },
    activated:function(){
        this.time();
        this.$store.dispatch("word");
    }
}
</script>

<style scoped>
input{
    width: 100%;
    height: 35px;
    padding-left: 15px;
    border-radius: 4px;
    border: solid 1px #999;
    margin-bottom: 10px;
}
#group{
    border-radius: 4px;
    border: solid 1px #999;
}
#xiao{
    font-size: 10px;
    color: #3388FF;
    margin: 0;
}
button{
    width: 100%;
    height: 35px;
    border-radius: 4px;
    margin: 8px 0;
    background-color: #2319DC;
    border: solid 1px #2319DC;
    color: white;
}
button:disabled{
    background-color: #999;
    border: solid 1px #999;
    color: black;
}
</style>